<template>
  <div id="app">
    <Top></Top>
    <Nav></Nav>
    <!-- <div id="nav">
      <router-link to="/">主页</router-link> |
      <router-link to="/QuanBuSanPin">全部商品</router-link>|
      <router-link to="/GeRenZonXin">个人中心</router-link>|
      <router-link to="/WoDeDinDan">我的订单</router-link>|
      <router-link to="/ZhuanShuFuLi">专属福利</router-link>
    </div> -->
    <router-view />
    <transition name="scale">
      <Denru v-show="$store.state.caca"></Denru>
    </transition>
    <!-- 弹框显示和隐藏  -->
    <Tisikuan v-show="$store.state.isShowToast"></Tisikuan>
    <bottom></bottom>
  </div>
</template>
<script>
import Top from "./components/common/Top.vue";
import Nav from "./components/common/Nav.vue";
import bottom from "./components/common/bottom.vue";
import Denru from "./components/common/Denru.vue";
import Tisikuan from "./components/common/Tisikuan.vue";

export default {
  components: {
    Top,
    Nav,
    bottom,
    Denru,
    Tisikuan,
  },
};
</script>

<style lang="less">
.scale-enter,
.scale-leave-to {
  transform: scale(0);
  opacity: 0;
}
.scale-enter-active,
.scale-leave-active {
  transition: transform 0.3s, opacity 0.3s;
  // transition: opacity .3s;
}
.scale-enter-to,
.scale-leave {
  transform: scale(1);
  opacity: 1;
}
</style>
